<!-- 自营商品审核（大区管理后台） -->

<template>
  <div>
    <el-form :inline="true" :model="formInline" @keyup.enter.native="search()">
      <el-form-item label="商品名称">
        <br />
        <el-input style="margin-left: -70px; width: 200px" v-model="formInline.goodsName" placeholder="请输入"></el-input>
      </el-form-item>
      <!-- <el-form-item label="商品类型">
        <br />
        <el-select v-model="formInline.shopType" style="margin-left: -70px; width: 200px">
          <el-option key="1" label="普通商品" value="1"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item v-if="userInfo.userType != '3'" label="营销区域">
        <br />
        <el-input style="margin-left: -70px; width: 200px" v-model="formInline.upOrgSeqidName"
          placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="计量单位">
        <br />
        <el-select v-model="formInline.unit" style="margin-left: -70px; width: 200px">
          <el-option v-for="(send, i) in unitData" :key="i" :value="send.uuid" :label="send.unitName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否限购">
        <br />
        <el-select v-model="formInline.isBuyLimit" style="margin-left: -70px; width: 200px">
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="专卖店">
        <br />
        <el-input style="margin-left: -58px; width: 200px" v-model="formInline.storeName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="会员价">
        <br />
        <el-input style="margin-left: -58px; width: 200px" v-model="formInline.memberPrice"
          placeholder="请输入"></el-input>
      </el-form-item>

      <div style="width: 100%; display: flex; justify-content: space-between">
        <el-radio-group v-model="formInline.auditState" size="mini" @change="search()">
          <el-radio-button label="">全部</el-radio-button>
          <el-radio-button :label="0">待审核</el-radio-button>
          <el-radio-button :label="1">审核通过</el-radio-button>
          <el-radio-button :label="2">审核不通过</el-radio-button>
        </el-radio-group>

        <div>
          <el-form-item>
            <el-button type="success" plain icon="el-icon-download" v-loading="exportLoading" size="mini"
              @click="exportExcel()">导出</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search()" size="mini">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>

    <el-table :data="tableData" style="width: 100%" border
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading">
      <el-table-column label="商品名称" prop="goodsName"></el-table-column>
      <el-table-column label="商品编号" prop="goodsSeq"></el-table-column>
      <el-table-column label="商品图片" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.picture.picUrl" v-if="scope.row.picture != '' && scope.row.picture != null" width="70"
            @click="$seeImage" height="50" style="object-fit: cover;" />
          <span v-else>无图片</span>
        </template>
      </el-table-column>
      <el-table-column label="计量单位" prop="unitName"></el-table-column>
      <!-- <el-table-column label="商品类型" prop="goodsType"></el-table-column> -->
      <el-table-column label="建议零售价" prop="salePrice"></el-table-column>
      <el-table-column label="会员价" prop="memberPrice"></el-table-column>
      <el-table-column label="是否限购">
        <template slot-scope="scope">
          {{ scope.row.isBuyLimit === 1 ? '限购' : '不限购' }}
        </template>
      </el-table-column>
      <el-table-column label="审核状态">
        <template slot-scope="scope">
          {{ auditEnmu[scope.row.auditState] ? auditEnmu[scope.row.auditState] : '未知' }}
        </template>
      </el-table-column>
      <el-table-column label="审核备注" prop="auditRemarks"></el-table-column>
      <el-table-column label="营销区域" prop="upOrgSeqidName"></el-table-column>
      <el-table-column label="专卖店" prop="storeName"></el-table-column>
      <el-table-column label="最近更新时间" prop="updateTime"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="120">
        <template slot-scope="scope">
          <el-button v-if="scope.row.auditState === 0" type="text" size="mini"
            @click="checkHandle(scope.row)">审核</el-button>
          <el-button type="text" size="mini" @click="detailHandle(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100, 150, 200]" :current-page="listQuery.current" :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <CheckDialog :show.sync="showDialog" :goodsId="curDetail.goodsId" @close="() => { curDetail = {} }"
      @change="search" />
  </div>
</template>

<script>
import {
  queryGoodsInfoListAutotrophy,
  queryGoodsInfoListAutotrophyExcel
} from '@/api/proprietaryGoods';
import { getProductUnitList } from '@/api/compositegoods';
import CheckDialog from './components/CheckDialog.vue';
export default {
  components: { CheckDialog },
  data() {
    return {
      showDialog: false,
      formInline: {
        goodsName: '',
        upOrgSeqidName: '',
        unit: '',
        isBuyLimit: '',
        auditState: '',
        shopName: '',
        isAutotrophy: 1,
        upOrgSeq: '',
        baseCode: '',
      },
      tableData: [],
      loading: false,
      listQuery: {
        current: 1,
        size: 20
      },
      unitData: [],
      total: 0,
      exportLoading: false,
      auditEnmu: {
        '-1': '已下架',
        0: '待审核',
        1: '审核通过',
        2: '审核不通过',
      },
      curDetail: {},
      userInfo: {},
      orgSeq: '',
    };
  },

  created() {
    const loginInfo = localStorage.getItem('logininfo');
    this.userInfo = JSON.parse(loginInfo);
    this.orgSeq = JSON.parse(loginInfo).orgSeq || JSON.parse(loginInfo).orgList[0].orgSeq;
    this.getList();

    this.getProductUnit();
  },

  methods: {
    //查询商品单位
    getProductUnit() {
      let data = {
        size: 100,
        current: 1,
        condition: {},
        ascs: [],
        descs: [],
      };
      getProductUnitList(data).then((res) => {
        this.unitData = res.records;
      });
    },
    search() {
      this.listQuery.current = 1;
      this.getList();
    },
    kong() {
      this.formInline = this.$options.data().formInline;
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    getList() {
      if (this.userInfo.userType == '3') {
        this.formInline.upOrgSeqidName = this.userInfo.orgName;
      } else {
        this.formInline.upOrgSeq = this.orgSeq;
      }
      const data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          ...this.formInline,
        },
        ascs: [],
        descs: [],
      };
      queryGoodsInfoListAutotrophy(data).then((res) => {
        if (res.code == 1) {
          this.tableData = res.records.map((item) => {
            item.tagTypes = item.tagType ? item.tagType.split(",") : [];
            return item;
          });
          this.total = res.total;
        } else {
          this.$message.error(res.message);
        }
      })
    },

    checkHandle(row) {
      this.showDialog = true;
      this.curDetail = { ...row };
    },

    detailHandle(row) {
      console.log('row', row);
      this.$router.push({
        name: 'proprietaryGoodsDetail',
        params: {
          goodsId: row.goodsId,
          edit: true
        }
      })
    },

    exportExcel() {
      this.exportLoading = true;
      const data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          ...this.formInline,
        },
        ascs: [],
        descs: [],
      }
      queryGoodsInfoListAutotrophyExcel(data).then((res) => {
        const link = document.createElement('a');
        let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
        link.style.display = 'none';
        //设置连接
        link.href = URL.createObjectURL(blob);
        link.download = '自营商品审核列表.xlsx';
        document.body.appendChild(link);
        //模拟点击事件
        link.click();
      }).finally(() => {
        this.exportLoading = false;
      });
    },
  },
};
</script>
